import React from 'react';
import { InputItem,List,Radio,Button,WingBlank,WhiteSpace } from 'antd-mobile';
import Logo from '../../component/logo/logo';

import { Redirect } from 'react-router-dom'
import { connect } from 'react-redux';
import { register } from '../../redux/user.redux'

@connect(
state => state.user,
{register}

)
class Register extends React.Component{
	constructor(props) {
	    super(props);
		this.state = {
			type:'genius',
			user:'',
			pwd:'',
			repeatpwd:''
		};
	}
	handleChange(key,value){
		this.setState({
			[key]:value
		});
	}
	handleRegister(){
		console.log(this.state);
		this.props.register(this.state);
	}
	render(){
		const radioData = [{type:'genius',value:'牛人'},{type:'boss',value:'老板'}];
		return (
			<div>
				{this.props.redirectTo ? <Redirect to={this.props.redirectTo}></Redirect> : null}
				<Logo></Logo>
				<WingBlank>
					<List>
						{this.props.msg ? <p>{this.props.msg}</p> : null}
						<InputItem onChange={v => this.handleChange('user',v)}>用户名</InputItem>
						<InputItem
						type='password' 
						onChange={v => this.handleChange('pwd',v)}
						>密码</InputItem>
						<InputItem 
						type='password' 
						onChange={v => this.handleChange('repeatpwd',v)}
						>确认密码</InputItem>
						{radioData.map(n => (
						<Radio.RadioItem  key={n.type} checked={this.state.type === n.type} onChange={v => this.handleChange('type',n.type)}>
							{n.value}
						</Radio.RadioItem>
						))}
						<WhiteSpace />
						<Button type='primary' onClick={this.handleRegister.bind(this)}>注册</Button>
					</List>
					
				</WingBlank>
			</div>
		)
	}
}
export default Register;